<template>
	<el-col :span="20" class="content1">
		<template v-if="dataSource.length >0">
			<!-- :key="'right-list-item' + index" -->
			<right-list-item v-for="(item, index) in list"   :key=" index"  :itemData="item" :in='index'/>
		</template>
	</el-col>
</template>

<script>
	import RightListItem from './RightListItem'
	export default {
		name: 'RightPane',
		components: {
			RightListItem
		},
		props: {
			dataSource: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				RightListItem,
				list: [],
				isSelect: true,
			}
		},
		mounted() {},
		watch: {
			dataSource() {
				this.list = this.dataSource

			}
		},
	}
</script>

<style lang="scss" scoped>
	.content1 {
		box-sizing: border-box;
		height: 540px;
		overflow-y: scroll;
		border-top: 4px solid #3672fe;
	}

	.lib-search-item {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 42px;

		.content {
			border-bottom: 1px solid #1890ff;
			padding-bottom: 26px;

			.row {
				height: 29px;
				line-height: 29px;
			}

			.title {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #4d86f7;

				span {
					margin-right: 18px;
				}
			}

			.contentText {
				font-size: 14px;
				color: #333333;

				span {
					margin-right: 8px;
				}

				.btn {
					user-select: none;
					cursor: pointer;
					display: inline-block;
					width: 73px;
					height: 26px;
					line-height: 26px;
					border-radius: 5px;
					text-align: center;
					transition: 0.1s;

					span {
						margin-left: 5px;
					}
				}

				.unselect {
					color: #f98550;
					border: 1px solid #f98550;

					&:hover {
						color: #fff;
						background-color: #f98550;
					}
				}

				.select {
					color: #fff;
					background-color: #f98550;
					border: 1px solid #f98550;

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>
